<template>
  <div class="page-hero">
    <!-- 顶部栏 -->
    <div class="topbar bg-dark py-2 px-3 d-flex ai-center text-white">
      <img src="../assets/logo.png" height="30px" />
      <div class="px-2 flex-1">
        <span class="ml-1">王者荣耀</span>
        <span class="ml-3">攻略站</span>
      </div>

      <router-link tag="div" to="/">更多英雄 &gt;</router-link>
    </div>

    <!-- 人物图 -->
    <div
      class="top"
      :style="{ 'background-image': `url(${model.banner})` }"
      style="padding-top: 3.5rem"
    >
      <div class="info text-white p-3 d-flex flex-column">
        <div class="pt-3">{{ model.title }}</div>
        <h2>{{ model.name }}</h2>
        <div>{{ model.categories.map((el) => el.name).join("/") }}</div>
        <div class="d-flex jc-between ai-center">
          <div class="py-2 scores" v-if="model.scores">
            <span>难度</span>
            <span class="badge bg-primary">{{ model.scores.difficult }}</span>
            <span>技能</span>
            <span class="badge bg-blue1">{{ model.scores.skills }}</span>
            <span>攻击</span>
            <span class="badge bg-danger">{{ model.scores.attack }}</span>
            <span>生存</span>
            <span class="badge bg-grey1">{{ model.scores.survive }}</span>
          </div>
          <router-link tag="span" to="/" class="text-grey"
            >皮肤: 6 &gt;</router-link
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: { required: true },
  },
  data() {
    return {
      model: {},
    };
  },
  methods: {
    async fetch() {
      const res = await this.$http.get(`/heroes/${this.id}`);
      this.model = res.data;
    },
  },
  created() {
    this.fetch();
  },
};
</script>

<style lang='scss'>
.page-hero {
  .top {
    margin-top: 11%;
    height: 50vw;
    background: #fff no-repeat top center;
    background-size: auto 100%;
  }
  .info {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    .scores {
      .badge {
        margin: 0 3px;
        display: inline-block;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        border-radius: 50%;
        font-size: 0.7rem;
        border: 1px solid rgba(255,255,255,0.2);
      }
    }
  }
}
</style>